<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title site-title">
					<legend><a name="fixbar">请假申请</a></legend>
				</fieldset>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">起止时间</label>
						<div class="layui-input-block">
							<input type="text" class="layui-input" id="startTime" placeholder=" - "  style="width: 350px;">
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">请假事由</label>
					<div class="layui-input-block bannwit">
						<input type="text" name="title" required  lay-verify="required" placeholder="请假事由" autocomplete="off" class="layui-input" value="">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">上传请假条</label>
						<div class="layui-input-block">
							<div class="layui-upload-drag" id="photo">
								<i class="layui-icon">&#xe67c;</i>
								<p>点击上传，或将文件拖拽到此处</p>
							</div>
						</div>				</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo">保存修改</button>
					</div>
				</div>
</body>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;



        //日期时间范围
        laydate.render({
            elem: '#startTime'
            ,type: 'datetime'
            ,range: true
        });



        //限定可选日期
        var ins22 = laydate.render({
            elem: '#test-limit1'
            ,min: '2016-10-14'
            ,max: '2080-10-14'
            ,ready: function(){
                ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
            }
        });

        //前后若干天可选，这里以7天为例
        laydate.render({
            elem: '#test-limit2'
            ,min: -7
            ,max: 7
        });

        //限定可选时间
        laydate.render({
            elem: '#test-limit3'
            ,type: 'time'
            ,min: '09:30:00'
            ,max: '17:30:00'
            ,btns: ['clear', 'confirm']
        });

        //同时绑定多个
        lay('.test-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        //初始赋值
        laydate.render({
            elem: '#test19'
            ,value: '1989-10-14'
            ,isInitValue: true
        });

        //选中后的回调
        laydate.render({
            elem: '#test20'
            ,done: function(value, date){
                layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
        });

        //日期切换的回调
        laydate.render({
            elem: '#test21'
            ,change: function(value, date){
                layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
            }
        });
        //不出现底部栏
        laydate.render({
            elem: '#test22'
            ,showBottom: false
        });

        //只出现确定按钮
        laydate.render({
            elem: '#test23'
            ,btns: ['confirm']
        });

        //自定义事件
        laydate.render({
            elem: '#test24'
            ,trigger: 'mousedown'
        });

        //点我触发
        laydate.render({
            elem: '#test25'
            ,eventElem: '#test25-1'
            ,trigger: 'click'
        });

        //双击我触发
        lay('#test26-1').on('dblclick', function(){
            laydate.render({
                elem: '#test26'
                ,show: true
                ,closeStop: '#test26-1'
            });
        });

        //日期只读
        laydate.render({
            elem: '#test27'
            ,trigger: 'click'
        });

        //非input元素
        laydate.render({
            elem: '#test28'
        });

        //墨绿主题
        laydate.render({
            elem: '#test29'
            ,theme: 'molv'
        });


        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n2'
            ,position: 'static'
            ,lang: 'en'
        });
        laydate.render({
            elem: '#test-n3'
            ,type: 'month'
            ,position: 'static'
        });
        laydate.render({
            elem: '#test-n4'
            ,type: 'time'
            ,position: 'static'
        });
    });
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');




        //表单初始赋值
        form.val('example', {
            "username": "杨帆" // "name": "value"
            ,"password": "420502198910228989"
            ,"interest": 0
            ,"like[write]": true //复选框选中状态
            ,"close": true //开关状态
            ,"sex": "男"
            ,"desc": "我爱 layui"
            ,"city": 0
            ,"quiz": 1
            ,"jobtitle": "高级工程师"
            ,"unit": "秭归某某某集团公司"
            ,"position": "主任"
            ,"rank": "副科级"
            ,"phone": "67109777"
            ,"mobilephone": "15871611455"
            ,"address": "秭归县什么什么路10号"
            ,"zipcode": "443333"
            ,"class": 1
        })


    });
</script>
</html>